<template>
  <div class="add-address">
    <!-- <cell-group>
      <field :label="'姓名：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>

      <field :label="'电话：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>
    </cell-group>

    <div class="text">收货地址：</div>

    <cell-group>
      <field :label="'省份：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>

      <field :label="'城市：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>
    </cell-group>

    <cell-group>
      <field :label="'省份：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>

      <field :label="'详细地址：'">
        <div class="icon" slot="left-icon">
          <img :src="icon" alt />
        </div>
      </field>
    </cell-group>-->

    <!-- <div class="submit">
      <van-button type="info" size="large">确认</van-button>
    </div>-->

    <address-edit
      :address-info="info"
      :area-list="areaList"
      :show-delete="aid ? true : false"
      @save="onSave"
      @delete="onDelete"
      @change-area="onChangeArea"
    />
  </div>
</template>

<script>
import { Field, Cell, CellGroup, Button, AddressEdit, Toast } from "vant";
import areaList from "../service/area.js";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";

export default {
  components: {
    Field,
    Cell,
    CellGroup,
    vanButton: Button,
    AddressEdit
  },
  data() {
    return {
      areaList,
      seletectArea: [],
      aid: this.$route.query.id || "",
      info: this.$route.query
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    // 根据有无地址id，来判断是新增地址还是修改地址
    // 如果是修改地址，则填充原来的数据
    if (this.aid) {
      let data = {
        title: "修改地址"
      };
      this.$store.commit("setNavInfo", data);
      document.title = "修改地址 - TIMELESS 分销商城";

      this.info.areaCode = this.info.countryCode;
      this.seletectArea = [
        {
          code: this.info.provinceCode,
          name: this.info.provinceName
        },
        {
          code: this.info.cityCode,
          name: this.info.cityName
        },
        {
          code: this.info.countryCode,
          name: this.info.countryName
        }
      ];
      this.$set(this.info, "tel", this.info.phone);
      this.$set(this.info, "addressDetail", this.info.address);
    }
  },
  methods: {
    // 地址处理
    onSave(content) {
      console.log(content);
      if (!this.aid) {
        // 新增地址
        http
          .post(urls.XZDZ, {
            uid: this.userInfo.id,
            name: content.name,
            phone: content.tel,
            provinceCode: this.seletectArea[0].code,
            cityCode: this.seletectArea[1].code,
            countryCode: this.seletectArea[2].code,
            address: content.addressDetail
          })
          .then(res => {
            if (res.data.code == 200) {
              Toast.success("新增地址成功");

              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            } else {
            }
          });
      } else {
        // 修改地址
        http
          .post(urls.XGSCDZ, {
            id: this.aid,
            name: content.name,
            phone: content.tel,
            provinceCode: this.seletectArea[0].code,
            cityCode: this.seletectArea[1].code,
            countryCode: this.seletectArea[2].code,
            address: content.addressDetail
          })
          .then(res => {
            if (res.data.code == 200) {
              Toast.success("修改地址成功");

              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            } else {
            }
          });
      }
      // console.log(content);
    },
    // 删除地址
    onDelete() {
      http
        .post(urls.XGSCDZ, {
          id: this.aid,
          isDelete: "Y"
        })
        .then(res => {
          if (res.data.code == 200) {
            Toast.success("删除地址成功");

            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          } else {
          }
        });
    },
    // 地址改变时
    onChangeArea(value) {
      console.log(value);
      this.seletectArea = value;
    }
  }
};
</script>

<style scoped>
.icon {
  width: 25px;
  height: 25px;
}

.icon img {
  width: 100%;
  height: 100%;
}

.text {
  padding: 10px 15px;
  background-color: #fff;
}
</style>

<style>
.van-address-edit__buttons .van-button--danger {
  background-color: #283c79;
  border: 1px solid #283c79;
  border-radius: 6px !important;
}
</style>